<template>
  <div class="selectItem-form">
    <el-form :model="formData" :rules="rules" label-width="100px" ref="formData">
      <el-form-item label="名称" prop="title">
        <el-input clearable v-model="formData.title"></el-input>
      </el-form-item>

      <el-form-item label="上级菜单" prop="pid">
        <el-input clearable placeholder="请选择上级菜单" size="small" v-model="formData.pidStr">
          <el-button @click="refPidManage" icon="el-icon-link" slot="append"></el-button>
        </el-input>
      </el-form-item>

      <el-form-item label="路由" prop="url">
        <el-input clearable v-model="formData.url"></el-input>
      </el-form-item>

      <el-form-item label="组件路径" prop="componentPath">
        <el-input clearable v-model="formData.componentPath"></el-input>
      </el-form-item>

      <el-form-item label="图标" prop="icon">
        <el-input clearable v-model="formData.icon"></el-input>
      </el-form-item>

      <el-form-item label="是否隐藏" prop="hidden">
        <el-switch v-model="formData.hidden"></el-switch>
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input clearable type="number" v-model="formData.sort"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="submitForm('formData')" type="primary">保存</el-button>
        <el-button @click="resetForm('formData')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogPidVisible" title="菜单列表" width="75%">
      <menu-manage
        :refButtonDisplayRange="refButtonDisplayRange"
        :refSelectType="refSelectType"
        @refManageSelectData="refManageSelectData"
      ></menu-manage>
    </el-dialog>
  </div>
</template>

<script>
import menuManage from './menuManage'
export default {
  name: 'menuForm',
  components: {
    menuManage
  },
  data() {
    return {
      dataId: null,
      refButtonDisplayRange: 'reference',
      refSelectType: 'radio',
      dialogPidVisible: false,
      fieldTypes: [],
      formData: {
        title: null,
        pid: null,
        pidStr: null,
        url: null,
        icon: null,
        componentPath: null,
        hidden: false,
        sort: 0
      },
      limit: 1,
      rules: {
        title: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { max: 10, message: '不能超过 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    if (this.$route.query && Object.keys(this.$route.query).length > 0) {
      this.dataId = this.$route.query.id
    }
    this.handleFormVisible()
  },
  computed: {
    pidStr() {
      return this.formData.pidStr
    }
  },
  watch: {
    pidStr(newVal, olVal) {
      if (newVal === '') {
        this.formData.pid = null
      }
    }
  },
  methods: {
    refManageSelectData(res) {
      this.dialogPidVisible = false
      this.formData.pid = res[0].id
      this.formData.pidStr = res[0].title
    },
    refPidManage() {
      this.dialogPidVisible = true
    },
    handleFormVisible() {
      //异步更新DOM
      this.$nextTick(() => {
        //清除表单验证
        this.$refs['formData'].clearValidate()
      })
      if (this.dataId == null) {
        this.formData = {
          title: null,
          pid: null,
          url: null,
          icon: null,
          componentPath: null,
          hidden: false,
          sort: 0
        }
      } else {
        //异步获取获取详情数据
        this.getDataById(this.dataId)
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$store
            .dispatch('menu/createOrUpdate', this.formData)
            .then(res => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.$router.push('/system/menu')
            })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getDataById(dataId) {
      this.$store.dispatch('menu/getByIdMoreDetail', dataId).then(res => {
        this.formData = {
          id: res.id,
          title: res.title,
          pid: res.pid ? JSON.parse(res.pid).id : null,
          pidStr: res.pid ? JSON.parse(res.pid).title : null,
          url: res.url,
          icon: res.icon,
          componentPath: res.componentPath,
          hidden: res.hidden,
          sort: res.sort
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.selectItem-form {
  width: 700px;
  padding-top: 50px;
  margin: 0 auto;
}
</style>

